<template>
    <el-row class="text-center">
        <el-col>
            <el-alert :closable="false">请使用微信进行扫码, {{ humanTime }}</el-alert>
            <el-image
                style="width: 200px; height: 200px;margin-top: 20px;"
                :src="qrcode"
                fit="fill"/>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: 'WechatQrcode',
    props: {
        // show: false,
        type: String,
    },
    data() {
        return {
            form: {
                client_id: '',
                channel: 'wechat',
            },
            loading: false,
            qrcode: '',
            qrcode_ttl: 600,
            qrcode_interval: null,
        }
    },
    watch: {
        // dialog 关闭时停止倒计时
        // 显示时, 如果有client_id, 重新获取登录二维码
        // show (val) {
        //     if (!val) {
        //         this.clearIntervals();
        //         return
        //     }
        //     if (this.form.client_id)  this.getQrcode();
        // }
    },
    computed: {
        humanTime() {
            let text = '';
            if (this.qrcode_ttl > 60) {
                text += parseInt(this.qrcode_ttl/60) +' 分 ';
            }
            text += this.qrcode_ttl%60 + ' 秒';
            return text;
        }
    },
    methods: {
        getQrcode() {
            window.clearInterval(this.qrcode_interval);
            this.$store.dispatch(this.type === 'bind' ? 'manager/BindQrcode' : 'manager/LoginQrcode', this.form).then(({data}) => {
                this.form.channel = data.data.channel;
                this.qrcode = data.data.url;
                this.qrcode_ttl = data.data.ttl;
                this.startQrcodeInterval();
            })
        },
        // 超时后重新请求
        startQrcodeInterval() {
            this.qrcode_interval = setInterval(() => {
                if (this.qrcode_ttl < 1) {
                    this.getQrcode();
                    return;
                }
                if (this.type === 'bind') {
                    this.bindQuery();
                } else if (this.type === 'login') {
                    this.loginQuery();
                }

                this.qrcode_ttl--;
            }, 1000);
        },
        // 绑定查询
        bindQuery() {
            this.$store.dispatch('manager/BindQuery', this.form).then(({data}) => {
                if (data.data) {
                    this.$message.success('操作成功');
                    window.clearInterval(this.qrcode_interval);
                    this.$emit('success', true);
                }
            })
        },
        // 登录查询
        loginQuery() {
            this.$store.dispatch('manager/LoginQrcodeQuery', this.form).then(({data}) => {
                if (data.data) {
                    this.$store.commit('manager/SET_TOKEN', data.data);
                    window.clearInterval(this.qrcode_interval);
                    this.$emit('success', true);
                }
            }).catch(err => {
                window.clearInterval(this.qrcode_interval);
            })
        },
        clearIntervals() {
            window.clearInterval(this.qrcode_interval);
        },
        makeClientId() {
            this.form.client_id = this.$helper.randomStr();
        },
    },
    created() {
        this.makeClientId();
        this.getQrcode();
    },
    destroyed() {
        this.clearIntervals();
    }
}
</script>

<style lang="scss" scoped>

</style>
